<!--  -->
<template>
  <div class="banner-container">
    <dl class="m-banner-dl">
      <dd
        v-for="(item,index) of menu"
        class="m-banner-dd"
        :key="index"
        @mouseenter="indexMouseEnter"
      >
        <i
          class="el-icon-edit tubiao"
          :class="item.type"
        ></i>
        <nuxt-link
          class="totitle"
          to="/my"
        >{{item.title}}</nuxt-link>
        <i class="el-icon-arrow-right"></i>
      </dd>
      <div
        class="m-banner-detail"
        v-if="kind"
      >
        <dl
          v-for="(item,index) in curdetail.child"
          :key="index"
        >
          <dt>
            <span class="title">{{item.title}}</span>
            <span>
              更多
              <i class="el-icon-arrow-right"></i>
            </span>
          </dt>
          <dd
            v-for="(c, index) in item.child"
            :key="index"
          >{{c}}</dd>
        </dl>
      </div>

    </dl>

  </div>
</template>

<script>
export default {
  data() {
    return {
      kind: "",
      menu: [
        {
          type: "food",
          title: "美食",
          child: [
            {
              title: "美食",
              child: [
                "代金券",
                "甜点",
                "饮品",
                "火锅",
                "自助餐",
                "小吃",
                "快餐",
                "日韩料理",
                "西餐",
                "聚餐",
                "宴请",
                "烧烤",
                "烤肉",
                "东北菜",
                "川湘菜",
                "江浙菜",
                "香锅烤鱼",
                "粤港菜",
                "中式烧烤/烤串",
                "西北菜",
                "咖啡酒吧",
                "茶馆",
                "云贵菜",
                "东南亚菜",
                "海鲜素食",
                "台湾/客家菜",
                "创意菜汤/粥/炖菜",
                "蒙餐新疆菜",
                "其他美食",
                "京菜鲁菜"
              ]
            }
          ]
        },
        {
          type: "waimai",
          title: "外卖",
          child: [
            {
              title: "外卖",
              child: ["美团外卖"]
            }
          ]
        },
        {
          type: "hotel",
          title: "酒店",
          child: [
            {
              title: "酒店",
              child: ["美团酒店"]
            }
          ]
        },
        {
          type: "movie",
          title: "猫眼电影",
          child: [
            {
              title: "热映电影",
              child: [
                "海王",
                "惊涛飓浪",
                "无名之辈",
                "狗十三",
                "无敌破坏王2：大闹互联网",
                "龙猫",
                "毒液：致命守护者",
                "印度合伙人",
                "憨豆特工3天气预爆"
              ]
            },
            {
              title: "热门影院",
              child: [
                "耀莱成龙国际影城",
                "保利国际影城",
                "大地影院",
                "万达影城博纳国际影城CGV影城",
                "橙天嘉禾影城金逸影城",
                "中影国际影城",
                "新华国际影城"
              ]
            }
          ]
        }
      ]
    };
  },

  components: {},

  computed: {
    curdetail() {
      return this.menu.filter(item => item.type === this.kind)[0];
    }
  },
  methods: {
    indexMouseEnter(e) {
      // console.log(e.target.querySelector("i").className.split(" ")[2]);

      this.kind = e.target.querySelector("i").className.split(" ")[2];
      console.log(this.kind);
    },
    indexMouseLeave() {
      console.log("离开了框框");
      let self = this;
      self._time = setTimeout(() => {
        self.kind = "";
      }, 150);
    }
  }
};
</script>
<style lang='scss' scoped>
.banner-container {
  width: 230px;
  height: 415px;
  color: #fff;
  font-size: 12px;
  position: relative;
  // float: left;
  a {
    color: #fff;
  }

  .m-banner-dl {
    width: 100%;
    height: 100%;
    background: rgba(2, 181, 157, 0.85);
    background: -webkit-linear-gradient(
      -90deg,
      rgba(2, 181, 157, 0.85) 2%,
      rgba(22, 146, 183, 0.85) 100%
    );
    padding-top: 10px;
    // & > dd:hover {
    //   & > .m-banner-detail {
    //     display: block;
    //   }
    // }
    dd {
      padding: 2px 12px;
      height: 26px;
      line-height: 26px;
      .el-icon-arrow-right {
        float: right;
      }
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      &:hover + .m-banner-detail {
        display: block;
      }
    }
  }
  .m-banner-detail {
    display: none;
    position: absolute;
    width: 400px;
    height: 416px;
    background-color: #fff;
    top: 0;
    left: 230px;
    z-index: 999999999;
    color: #999;
    font-size: 12px;
    padding: 20px;
    dt {
      display: flex;
      justify-content: space-between;
      // margin-bottom:10px;
      border-bottom: 1px solid #eee;
      padding: 15px 0;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #222;
        cursor: pointer;
      }
      span {
        font-size: 12px;
      }
    }
    dd {
      line-height: 15px;
      display: inline-block;
      margin-right: 16px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
}
</style>
